<template>
  <div class="about">
    <!-- <HelloWorld></HelloWorld>
    <myForm></myForm> -->
     <!-- component他是vue中的内置组件   把组价包裹成动态组件   is属性绑定组件名 -->
    <keep-alive>
       <component :is="comName"></component>
    </keep-alive>

    <button @click="toggle">组件切换</button>

       <!-- ///////////////////////////////// -->

       <my-header></my-header>

       <my-header></my-header>

       <my-header></my-header>

       <my-header></my-header>

  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
import myForm from '@/components/myForm.vue'
import myHeader from '@/components/myHeader.vue'
export default {
    data() {
        return {
            comName:'HelloWorld'
        }
    },
    components:{
        HelloWorld,
        myForm,
        myHeader
    },
    methods: {
        toggle(){
           this.comName = this.comName=='HelloWorld'?'myForm':'HelloWorld'
        }
    },
}
</script>
